<template>
	<view v-if="pageData" class="my-course-cont" style="--px: 26rpx">
		<!-- 课程信息组件 -->
		<course-info :course="pageData"></course-info>
		<!-- 选择日期组件 -->
		<selection-time :disabled="!isEditor" :choosedate="pageData.class_hour" @timechange="onTimeChange" />
		<!-- 门店组件 -->
		<select-stores title="上课门店" :stores="stores"></select-stores>
		<!-- 底部按钮 -->
		<view class="bottom-btn flex vertical-center align-center" >
			<v-button v-if="pageData.is_change == 0" @onclick="onClickEditor">{{btntxt}}</v-button>
			<v-button v-if="pageData.is_change == 1" type="gray">调课审核中</v-button>
		</view>
		
		<model :show="isShow" :maskClosable="false">
			<view class="popup-cont">
				<view class="fn-25">您已成功调课，等待审核通过</view>
				<v-button width="365" height="59" @onclick="getDeatil">
					<view class="fn-25" style="color: #2C0101;">好的</view>
				</v-button>
			</view>
		</model>
	</view>
</template>

<script>
	import { toast } from '@/utils/util.js';
	import vButton from '@/components/button/button.vue';
	import courseInfo from '@/components/course-info/course-info.vue';
	import selectionTime from "@/components/selection-time/selection-time.vue";
	import selectStores from '@/components/select-stores/select-stores.vue';
	import Model from '@/components/modal/modal.vue';
	import CourseApi from '@/api/course.js';
	
	export default {
		components: {
			vButton,
			courseInfo,
			selectionTime,
			selectStores,
			Model
		},
		data() {
			return {
				id: "",
				pageData: null,
				isEditor: false,
				isShow: false,
				btntxt: "预约调课",
				stores: [],
				dateData: null,
			};
		},
		computed: {
			
		},
		onLoad(e) {
			this.id = e.id;
			this.getDeatil()
		},
		methods: {
			async getDeatil() {
				const res = await CourseApi.GetMyOrderDetail({id: this.id});
				uni.setNavigationBarTitle({
					title: res.c_name
				})
				this.pageData = res;
				this.isEditor = res.is_change == 0;
				this.stores = [{
					name: res.s_name,
					address: res.s_address
				}]
				this.isShow = false;
			},
			// 监听组件返回的数据
			onTimeChange(data) {
				this.dateData = data;
				this.isEditor = true;
				this.btntxt = "确认修改";
			},
			onClickEditor(e) {
				if(this.isEditor) {
					if(!this.dateData.selectToday) {
						toast("未选择调课日期");
						return
					};
					this.postOrderChange();
				}
			},
			async postOrderChange() {
				const res = await CourseApi.PostOrderChange({
					id: this.id,
					old_day: this.pageData.change_day.old || "",
					change_day: this.dateData.selectToday
				});
				this.isShow = true;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.my-course-cont{
		padding: 26rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	}
	.bottom-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100vw;
		height: 118rpx;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $color-white;
		box-shadow: 0px -2px 5px rgba(117, 117, 117, 0.1);
		z-index: 101;
	}
	.popup-cont{
		width: 613rpx;
		padding-top: 68rpx;
		padding-bottom: 30rpx;
		text-align: center;
		border-radius: 10rpx;
		> view{
			margin-bottom: 52rpx;
		}
	}
</style>
